import localIcon from "@/assets/images/local.png";
import { CSSRuleObject, styled } from "styledfc";
import { FlexCss, PositionCss } from "../../../utils/styledfc";
import { useEffect, useRef, useState } from "react";
interface MessageProps {
    desc: string;
    nation: string;
    changeHidden: (flag: boolean) => void;
}
export default function Message(props: MessageProps) {
    const [show, setShow] = useState(true);
    const [autoFlag, setAutoFlag] = useState(false);
    const ref = useRef<HTMLDivElement>(null);
    useEffect(() => {
        document.documentElement.scrollHeight > document.documentElement.clientHeight && (setAutoFlag(true), props.changeHidden(true));
        setShow(false);
    }, [props.desc]);
    return (
        <div className={messageStyle.className}>
            <div className="message__title">
                <img src={localIcon} /> <span>{props.nation ?? "暂无数据"}</span>
            </div>
            <div ref={ref} className={`message__desc ${show && "active"}`}>
                {props.desc ?? "暂无数据"}
            </div>
            <div className={`message__line ${show && "active"}`} style={{ display: autoFlag ? "flex" : "none" }}>
                <div></div>
                <span
                    onClick={() => {
                        setShow(!show), props.changeHidden(show);
                    }}
                >
                    {show ? "点击收起" : "点击展开"}
                </span>
            </div>
        </div>
    );
}
const messageStyle = styled({
    margin: "14rem 18rem 0",
    minHeight: "186rem",
    ...(FlexCss("center", "flex-start", "column") as CSSRuleObject),
    ".message__title": {
        marginBottom: "14rem",
        width: "100%",
        ...(FlexCss("center") as CSSRuleObject),
        ">img": {
            height: "30rem",
            width: "30rem",
        },
        ">span": {
            marginLeft: "4rem",
            fontWeight: "100",
        },
    },
    ".message__desc": {
        lineHeight: "26rem",
        fontWeight: "100",
        textIndent: "2rem",
        textAlign: "justify",
        height: "100%",
        overflow: "hidden",
        ":where(.active)": {
            height: "auto",
        },
    },
    ".message__line": {
        lineHeight: "26rem",
        fontWeight: "100",
        fontSize: "12rem",
        textAlign: "right",
        color: "#999",
        width: "100%",
        padding: "0 10rem",
        boxSizing: "border-box",
        backgroundColor: "#fff",
        ...(FlexCss("center", "space-between") as CSSRuleObject),
        ...(PositionCss("fixed", { bottom: "0", right: "0" }) as CSSRuleObject),
        ":where(.active)": {
            position: "relative",
            padding: "0",
        },
        ">div": {
            backgroundColor: "#999",
            width: "84%",
            height: "1rem",
        },
    },
});
